<template>
    <div class="common-layout">
        <el-container>
            <el-main>
                <el-space>
                    <h2>评论</h2><strong>共{{ commentData.total }}条评论</strong>
                </el-space>
                <el-divider border-style="double" />
                <!-- 我要评论 -->
                <el-space>
                    <textarea ref="text" 
                    cols="30" rows="10" 
                    v-model="userComment" 
                    maxlength="400" 
                    placeholder="最大输入200字..."

                       ></textarea>
                    <el-button @click="remark">发布</el-button>
                </el-space>

                <el-divider border-style="double" />
                <el-space direction="vertical">
                    <h4>最新 评论</h4>
                </el-space>
                <div class="comment-container" v-for="item  in commentData.comments" :key="item.commentId">
                    <el-space>
                        <el-avatar :src="item.user.avatarUrl" shape="square"></el-avatar>
                        <el-link type="info">{{ item.user.nickname }}：</el-link>
                        <el-image class="vipImg" v-if="item.user.vipRights" :src='item.user.vipRights.associator?.iconUrl'>
                        </el-image>
                        {{ item.content }}
                    </el-space>
                    <el-space class="location-timestr">
                        位置:<span>{{ item.ipLocation.location }}</span>
                        发布时间:<span>{{ item.timeStr }}</span>
                    </el-space>
                    <el-divider border-style="double" />
                </div>
            </el-main>

        </el-container>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { djProgramRemark } from '@/api/dj'
import { djSetRemark } from '@/api/dj'

export default {
    props:['fff','num'],
    data() {
        return {
            songId: '',
            commentData: '',
            userComment: '',
            songInfo: '',
            flag:false,
           
        }
    },
  
    computed: {
        ...mapState('djProgramModule', ['programId']),
    },
    methods: {
        // 点击获取焦点
        getfocus(){
         this.$refs.text.focus()
        },
        // 发布 评论
        remark() {
            djSetRemark({
                t: 1,
                type: 4,
                id: this.programId,
                content: this.userComment
            }).then(res => res.code === 200 && ElMessage.success('评论成功!'))
            this.getRemark(this.programId);
            // 清空 输入框
            this.userComment = ''
        },
        //   获取 评论
        getRemark(id) {
            djProgramRemark({ id: id }).then(res => {
                // console.log('获取评论res', res);
                this.commentData = res
                // console.log(this.commentData.total);
            })
            console.log(this.props,'fff');
           
        }
    },
    mounted(){
       
    },
    created() {
        this.getRemark(this.programId)    
    }
}
</script>

<style lang="scss" scoped>
textarea {
    width: 300px;
    height: 100px;
    border: 2px solid #dad4d4;
    border-radius: 10px;
    margin-top: 20px;
    box-shadow: none;
    outline: none;
    outline-color: #666;
    padding: 10px;
    color: #666;
    font-size: 16px;
    resize: none;
}

.el-space {
    display: flex;
}

.el-space,
.el-space--horizontal,
.comment-container {
    font-size: 14px;
}

.vipImg {
    width: 50px;
    object-fit: contain;
}

.user-avatar {
    width: 50px;
    object-fit: contain;
}

.comment-textarea {
    width: 800px;
}

.location-timestr {
    justify-content: flex-end;
}
</style>
